<template>
    <div>
        <top-bar :to="back_to"
                 :style="color"
                 title="作品填写">
        </top-bar>
        <div class="name-panel"
             :style="name_panel_style">
        </div>
        <mu-paper class="work-paper mu-form">
            <mu-tabs :value.sync="active"
                     full-width inverse
                     color="secondary"
                     indicator-color="yellow"
                     text-color="rgba(0, 0, 0, .54)"
                     center>
                <mu-tab>个人信息</mu-tab>
                <mu-tab>作品文本</mu-tab>
                <mu-tab>作品录音</mu-tab>
            </mu-tabs>
            <div v-show="active === 0">
                <mu-container>
                    <mu-text-field @focusout="userNameCheck"
                                   v-model="form.value_name.value"
                                   label="UserName"
                                   label-float
                                   help-text="请输入你的昵称[必选]"
                                   icon="account_circle"></mu-text-field>
                    <br/>
                    <mu-text-field v-model="form.value_phone.value"
                                   label="Phone"
                                   label-float
                                   help-text="请输入手机号码[必选]"
                                   @focusout="checkPhone"
                                   icon="phone">
                    </mu-text-field>
                    <br/>
                    <mu-text-field v-model="form.value_email.value"
                                   label="Email Address"
                                   suffix="@qq.com"
                                   label-float
                                   help-text="请输入你的邮箱[可选]"
                                   icon="email">
                    </mu-text-field>
                    <br/>
                </mu-container>
            </div>
            <div class="work-text"
                 v-show="active === 1">
                <mu-container style="padding-top: 3vh">
                    <mu-text-field @focusout="titleCheck"
                                   v-model="form.value_title.value"
                                   type="text"
                                   placeholder="作品标题">
                    </mu-text-field>
                    <br/>
                    <mu-text-field v-model="form.value_content.value"
                                   multi-line :rows="10"
                                   placeholder="输入作品内容.....">
                    </mu-text-field>
                    <br/>
                </mu-container>
            </div>
            <div class="work-src"
                 v-show="active === 2">
                <div align="center"
                     style="position:relative;top:2vh;padding-top: 2vh;background-color: #e6ee9c;border-radius: 4px">
                    <input class="input-mp3-button"
                           type="file" accept="audio/*"
                           capture="microphone"
                           @change="change"/><br/>
                    <audio ref="Audio" class="input-preview-audio"
                           style="height: 100px"
                           :src="obj"
                           controls="controls">
                    </audio>
                </div>
            </div>
        </mu-paper>
        <div class="bottom-submit">
            <mu-button round
                       color="green"
                       style="float: right"
                       @click="goToSubmit">
                去提交
            </mu-button>
        </div>
        <mu-dialog title="提醒"
                   width="360"
                   :open.sync="showInfo">
            {{tips}}
            <p v-if="is_ios">
                你现在使用的是<span style='color: olivedrab'>苹果手机</span>,在选取录音的时候,如果无法调用的<strong>系统录音<i class="material-icons">radio_button_checked</i></strong>，
                显示的是<strong>摄像头<i class="material-icons">camera_alt</i></strong>，建议使用其他浏览器或pc端上传！！
            </p>
            <mu-button slot="actions"
                       flat color="primary"
                       @click="closeDialog">
                我知道了
            </mu-button>
        </mu-dialog>
    </div>
</template>

<script>
    import TopBar from '@/components/TopBar'

    export default {
        name: "AddWork",
        components: {
            TopBar
        },
        data() {
            return {
                obj: null,
                tips: "",
                is_ios: false,
                active: 0,
                showInfo: false,
                color: "color:white;background-color:" + this.$store.state.uiState.top_bar,
                name_panel_style: {
                    backgroundColor: this.$store.state.uiState.top_bar
                },
                form: {
                    value_name: {
                        value: '',
                        required: true
                    },
                    value_phone: {
                        value: '',
                        required: true
                    },
                    value_email: {
                        value: '',
                        required: false
                    },
                    value_title: {
                        value: '',
                        required: true
                    },
                    value_content: {
                        value: '',
                        required: true
                    },
                    value_time_info: {
                        value: '',
                        required: true
                    },
                    value_src: {
                        value: null,
                        required: true
                    }
                },
            }
        },
        methods: {
            checkPhone() {
                let check_phone = /^1[3|4|5|7|8][0-9]{9}$/
                let is_phone = check_phone.test(this.form.value_phone.value)
                if (!is_phone) {
                    this.tips = '未正确填写手机号!'
                    this.showInfo = true
                }
            },
            closeDialog() {
                this.showInfo = false
            },
            change(e) {
                this.obj = URL.createObjectURL(e.target.files[0])
                this.$refs.Audio.load();
                this.form.value_src.value = e.target.files[0]
                this.$refs.Audio.oncanplay = () => {
                    this.getTimeInfo(this.$refs.Audio.duration)
                }
            },
            getTimeInfo(duration) {
                let minute = Math.floor(duration / 60)
                let seconds = Math.floor(duration % 60)
                if (minute > 2) {
                    this.showInfo = true
                    this.tips = "录音作品长度不能超过3分钟!"
                    this.form.value_src.value = null
                    this.obj = null
                    this.$refs.Audio.src = ''
                    return
                }
                this.form.value_time_info.value = (minute < 10 ? '0' + minute : minute) + ':' + (seconds < 10 ? '0' + seconds : seconds)
            },
            userNameCheck() {
                if (this.form.value_name.value.length > 2) {
                    this.$store.dispatch('checkNickName', {nickname: this.form.value_name.value}).then(res => {
                        if (res.data.data === true) {
                            this.showInfo = true
                            this.tips = "用户昵称已被使用!"
                        }
                    })
                } else {
                    this.showInfo = true
                    this.tips = "昵称长度不能小于2"
                }
            },
            titleCheck() {
                if (this.form.value_name.value.length > 2) {
                    this.$store.dispatch('checkWorkName', {name: this.form.value_title.value}).then(res => {
                        if (res.data.data === true) {
                            this.showInfo = true
                            this.tips = "作品名已被使用!"
                        }
                    })
                } else {
                    this.showInfo = true
                    this.tips = "作品标题长度不能小于2"
                }
            },
            checkVerify() {
                for (let i in this.form) {
                    if (this.form[i].required) {
                        if (this.form[i]['value'] !== null && this.form[i]['value'] !== '') {
                            continue
                        } else {
                            return '表单未按要求填写!'
                        }
                    }
                }
                return null
            },
            goToSubmit() {
                let message = this.checkVerify()
                if (message === null) {
                    let temp = {
                        wName: '',      //'作品名称',
                        wContent: '',   //'朗读内容',
                        dNickname: '',  //'朗读者昵称',
                        dPhone: '',      //'朗读者手机号码',
                        dEmail: '',     //'朗读者点赞邮箱',
                        wDuration: '',  //'录音时间长度',
                        record: null,   //'录音文件'
                    }
                    temp.wName = this.form.value_title.value
                    temp.wContent = this.form.value_content.value
                    temp.dNickname = this.form.value_name.value
                    temp.dPhone = this.form.value_phone.value
                    temp.dEmail = this.form.value_email.value
                    temp.wDuration = this.form.value_time_info.value
                    temp.record = this.form.value_src.value
                    this.$store.dispatch('addWorks', temp).then(res => {
                        this.showInfo = true
                        this.tips = res.data.msg
                        if (res.data.data.code === 0) {
                            this.$router.push('/declaimer/me')
                        }
                    }).catch(e => {
                        this.showInfo = true
                        this.tips = e
                    })
                } else {
                    this.showInfo = true
                    this.tips = message
                }
            }
        },
        computed: {
            back_to() {
                return this.$store.state.uiState.back_to
            }
        },
        destroyed() {
            this.form.value_src.value = null
            this.form.value_time_info.value = ''
            localStorage.setItem('addWorkForm', JSON.stringify(this.form))
        },

        created() {
            this.is_ios = !!navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)
            if (this.is_ios) {
                this.showInfo = true
                this.tips = ""
            }
            let form = localStorage.getItem('addWorkForm')
            if (form != null) {
                this.form = JSON.parse(form)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .mu-input
        width 100%

    .mu-elevation-4
        box-shadow none
        -webkit-box-shadow none

    .name-panel
        height 30vh
        width 100%

    .work-paper
        position relative
        border-radius 6px 6px 0 0
        height 70vh
        padding 2vh
        width 100%
        top -60px

    .bottom-submit
        padding 1vh
        position fixed
        bottom 0vh
        width 100%
        background-color white

    input[type="file" i]
        background-color #cfd8dc
        width 95%
        padding 10px
        color gray
</style>